"use client"

import { useState } from "react"
import { Settings, Edit, Share, Grid, Bookmark, Tag } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { PostCard } from "@/components/post-card"
import { BottomNavigation } from "@/components/bottom-navigation"
import { useAuth } from "@/lib/auth"
import { getPostsByUserId } from "@/lib/mock-data"

export default function ProfilePage() {
  const { user, logout } = useAuth()
  const [activeTab, setActiveTab] = useState("posts")

  if (!user) return null

  const userPosts = getPostsByUserId(user.id)

  return (
    <div className="min-h-screen bg-gray-50 pb-20">
      {/* Header */}
      <div className="bg-white border-b border-gray-200 sticky top-0 z-40">
        <div className="max-w-md mx-auto px-4 py-3">
          <div className="flex items-center justify-between">
            <h1 className="text-xl font-bold text-gray-900">{user.username}</h1>
            <div className="flex items-center space-x-2">
              <Button variant="ghost" size="sm">
                <Share size={20} />
              </Button>
              <Button variant="ghost" size="sm" onClick={logout}>
                <Settings size={20} />
              </Button>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-md mx-auto">
        {/* Profile Info */}
        <div className="bg-white p-4 border-b border-gray-100">
          <div className="flex items-start space-x-4 mb-4">
            <Avatar className="h-20 w-20">
              <AvatarImage src={user.avatar || "/placeholder.svg"} alt={user.displayName} />
              <AvatarFallback className="text-2xl">{user.displayName.charAt(0)}</AvatarFallback>
            </Avatar>

            <div className="flex-1">
              <div className="flex items-center space-x-2 mb-1">
                <h2 className="text-xl font-bold">{user.displayName}</h2>
                {user.verified && (
                  <div className="w-5 h-5 bg-blue-500 rounded-full flex items-center justify-center">
                    <span className="text-white text-xs">✓</span>
                  </div>
                )}
              </div>
              <p className="text-gray-600 text-sm mb-3">{user.bio}</p>

              {user.location && <p className="text-gray-500 text-sm mb-3">📍 {user.location}</p>}

              <div className="flex items-center space-x-6 mb-3">
                <div className="text-center">
                  <div className="font-bold text-lg">{user.posts}</div>
                  <div className="text-gray-500 text-xs">Posts</div>
                </div>
                <div className="text-center">
                  <div className="font-bold text-lg">{user.followers.toLocaleString()}</div>
                  <div className="text-gray-500 text-xs">Followers</div>
                </div>
                <div className="text-center">
                  <div className="font-bold text-lg">{user.following.toLocaleString()}</div>
                  <div className="text-gray-500 text-xs">Following</div>
                </div>
              </div>
            </div>
          </div>

          <Button className="w-full mb-3">
            <Edit size={16} className="mr-2" />
            Edit Profile
          </Button>

          {/* Interests */}
          {user.interests.length > 0 && (
            <div className="flex flex-wrap gap-2">
              {user.interests.map((interest) => (
                <span key={interest} className="px-3 py-1 bg-gray-100 text-gray-700 text-sm rounded-full">
                  {interest}
                </span>
              ))}
            </div>
          )}
        </div>

        {/* Content Tabs */}
        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
          <div className="bg-white border-b border-gray-100">
            <TabsList className="w-full h-12 bg-transparent p-0">
              <TabsTrigger
                value="posts"
                className="flex-1 h-full data-[state=active]:border-b-2 data-[state=active]:border-blue-600 rounded-none"
              >
                <Grid size={16} className="mr-2" />
                Posts
              </TabsTrigger>
              <TabsTrigger
                value="saved"
                className="flex-1 h-full data-[state=active]:border-b-2 data-[state=active]:border-blue-600 rounded-none"
              >
                <Bookmark size={16} className="mr-2" />
                Saved
              </TabsTrigger>
              <TabsTrigger
                value="tagged"
                className="flex-1 h-full data-[state=active]:border-b-2 data-[state=active]:border-blue-600 rounded-none"
              >
                <Tag size={16} className="mr-2" />
                Tagged
              </TabsTrigger>
            </TabsList>
          </div>

          <TabsContent value="posts" className="mt-0">
            {userPosts.length === 0 ? (
              <div className="text-center py-12 bg-white">
                <Grid size={48} className="mx-auto text-gray-300 mb-4" />
                <h3 className="text-lg font-medium text-gray-900 mb-2">No posts yet</h3>
                <p className="text-gray-500 mb-4">Share your first post to get started!</p>
                <Button>Create Post</Button>
              </div>
            ) : (
              <div>
                {userPosts.map((post) => (
                  <PostCard key={post.id} post={post} />
                ))}
              </div>
            )}
          </TabsContent>

          <TabsContent value="saved" className="mt-0">
            <div className="text-center py-12 bg-white">
              <Bookmark size={48} className="mx-auto text-gray-300 mb-4" />
              <h3 className="text-lg font-medium text-gray-900 mb-2">No saved posts</h3>
              <p className="text-gray-500">Posts you save will appear here</p>
            </div>
          </TabsContent>

          <TabsContent value="tagged" className="mt-0">
            <div className="text-center py-12 bg-white">
              <Tag size={48} className="mx-auto text-gray-300 mb-4" />
              <h3 className="text-lg font-medium text-gray-900 mb-2">No tagged posts</h3>
              <p className="text-gray-500">Posts you're tagged in will appear here</p>
            </div>
          </TabsContent>
        </Tabs>
      </div>

      <BottomNavigation />
    </div>
  )
}
